<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <form class="layui-form" action="" lay-filter="updateFormFilter">
        <br><input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">收货人姓名</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="receiverName" lay-verify="required" placeholder="请输入收货人姓名" autocomplete="off" lay-reqtext="请填写收货人姓名" lay-affix="clear" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">电话号码</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="tel" name="receiverPhone" lay-verify="required|phone" placeholder="请输入电话号码" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="tel" name="receiverMobile" lay-verify="required|phone" placeholder="请输入手机号码" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">地址信息</label>
            <div class="layui-input-inline">
                <select name="provinceId" id="provinceId" lay-filter="provinceId">
                    <option value="">请选择省</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="cityId" id="cityId" lay-filter="cityId">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="areaId" id="areaId">
                    <option value="">请选择县/区</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">详细地址</label>
            <div class="layui-input-block">
                <textarea name="receiverAddress" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息" class="layui-textarea" style="width: 600px"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">邮政编码</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="tel" name="receiverZip" lay-verify="required|receiverZip" placeholder="请输入邮政编码" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="checkbox" name="checked" value="1" title="设置为默认收货地址">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="ShippingUpdate">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
        layui.use(['form', 'laydate', 'util'], function(){
            var form = layui.form;
            var layer = layui.layer;
            var queryString = window.location.search;
            var urlParams = new URLSearchParams(queryString);
            var id = urlParams.get("id");

            $.post(
                '/shipping/selectById',
                {'id': id},
                function (result) {
                    if (result.code == 0) {
                       $(result.data.listProvince).each(function () {
                            $('#provinceId').append('<option value="'+this.provinceId+'">'+this.province+'</option>');
                        })
                        $(result.data.listCity).each(function () {
                            $('#cityId').append('<option value="'+this.cityId+'">'+this.city+'</option>');
                        })
                        $(result.data.listArea).each(function () {
                            $('#areaId').append('<option value="'+this.areaId+'">'+this.area+'</option>');
                        })
                        form.val('updateFormFilter', result.data.shipping);
                    }
                },
                'json'
            );
            // 提交事件
            form.on('submit(ShippingUpdate)', function(data){
                var field = data.field; // 获取表单字段值
                $.post(
                    '/shipping/update',
                    field,
                    function (result) {
                        console.log(result);
                        if (result.code == 0) {
                            mylayer.okMsg(result.msg);
                            // layer.close(index);
                            // table.reload('tableId');
                            setInterval(function() {
                                //关闭弹出框
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                //刷新父页面
                                window.parent.location.reload();
                            }, 2000)
                        } else {
                            mylayer.errorMsg(result.msg);
                        }
                    },
                    'json'
                );
                return false; // 阻止默认 form 跳转
            });

            /*$(function () {
                $.post(
                    '/shipping/selectProvince',
                    function (result) {
                        console.log(result);
                        $(result.data).each(function () {
                            $('#provinceId').append('<option value="'+this.provinceId+'">'+this.province+'</option>');
                        })
                        form.render('select');
                    },
                    'json'
                )
            });*/
            form.on('select(provinceId)', function(data){
                var elem = data.elem; // 获得 select 原始 DOM 对象
                var value = data.value; // 获得被选中的值
                var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

                $.post(
                    '/shipping/selectCity',
                    {'provinceId': value},
                    function (result) {
                        console.log(result);
                        if (result.code == 0) {
                            $('#cityId').empty();
                            $(result.data).each(function () {
                                $('#cityId').append('<option value="'+this.cityId+'">'+this.city+'</option>');
                            })
                            form.render('select');
                        }
                    },
                    'json'
                );
            });
            form.on('select(cityId)', function(data){
                var elem = data.elem; // 获得 select 原始 DOM 对象
                var value = data.value; // 获得被选中的值
                var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

                $.post(
                    '/shipping/selectArea',
                    {'cityId': value},
                    function (result) {
                        console.log(result);
                        if (result.code == 0) {
                            $('#areaId').empty();
                            $(result.data).each(function () {
                                $('#areaId').append('<option value="'+this.areaId+'">'+this.area+'</option>');
                            })
                            form.render('select');
                        }
                    },
                    'json'
                );
            });
            // 自定义验证规则
            form.verify({

                receiverZip: function(value, elem) {
                    if (!/^[\S]{6}$/.test(value)) {
                        return '邮政编码必须为6位的非空数字';
                    }
                }
            });
        });
    </script>
</body>
</html>